import "@animxyz/core";
import { XyzTransitionGroup } from "@animxyz/react";

import BackgroundImg from "@assets/bg01.jpg";
import Fireworks1 from "@assets/fireworks_1.png";
import Fireworks2 from "@assets/fireworks_2.png";
import Lantern from "@assets/lantern.png";
import BaseBackground from "@plugin/BaseBackground";
import EnhanceUseNavigate from "@plugin/EnhanceUseNavigate";
import LoadingProcess from "@plugin/LoadingProgress";
import React, { Component } from "react";
import { PreLoadImages, getChannel, isFirstLoad } from "../../../utils";
import { CampaignIds } from "../../../utils/ha.common";
import { ACTIVITY_3_ASSETS } from "../../../utils/preloadAssets";
import styles from "../../activity1/Start/index.module.scss";

const LanternBackground = (props) => {
  return (
    <div className={styles.lantern_background}>
      <img src={Lantern} className={styles.lantern} alt="" />
      <img src={Fireworks1} className={styles.fireworks1} alt="" />
      <img src={Fireworks2} className={styles.fireworks2} alt="" />
      {props.children}
    </div>
  );
};
class Index extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showFlag: false,
    };

    this.loadingRef = React.createRef();
  }

  async componentDidMount() {
    await PreLoadImages(ACTIVITY_3_ASSETS);
    setTimeout(() => {
      this.loadingRef && this.loadingRef.end();
    }, 1000);

    window._ha("send", "action", "cny_activity3_loadingpage_view", {
      campaign_id: CampaignIds.activity3,
      channel: getChannel(),
      first_load: isFirstLoad("activity_3"),
    });
  }

  handlerLoaded = () => {
    const search = new URLSearchParams(window.location.search);
    const channel = search.get("channel");
    if (channel === "Day15") {
      try {
        window.wx.miniProgram.redirectTo({
          url: "/pages/userPackage/CNYDownLoad",
        });
      } catch (error) {}

      return;
    }

    this.props.navigate("/activity_home_3", {
      replace: true,
    });
  };

  render() {
    const { showFlag } = this.state;
    return (
      <BaseBackground
        backgroundImage={BackgroundImg}
        showFlag={showFlag}
        bigLogo={true}
      >
        <LanternBackground>
          <XyzTransitionGroup appear appearVisible xyz="fade up-1">
            <div className={styles.header_box}>
              <LoadingProcess
                ref={(ref) => (this.loadingRef = ref)}
                loaded={this.handlerLoaded}
                showProcessType="text"
              />
            </div>

            <div className={styles.dragon} />
          </XyzTransitionGroup>
        </LanternBackground>
      </BaseBackground>
    );
  }
}

export default EnhanceUseNavigate(Index);
